<template>
    <section class="section section-shaped section-lg my-0">
        <div class="shape shape-style-1 bg-gradient-default">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div v-if="showError" class="contentDiv">
            <base-alert type="danger">
                {{errorMsg}}
            </base-alert>
        </div>
        <div v-if="showInfo" class="contentDiv">
            <base-alert class="col-md-6" type="dark">
                {{infoMsg}}
            </base-alert>
        </div>
        <div class="container pt-lg-md">
            <div class="row justify-content-center">
                <div class="col-lg-12">
                    <card type="secondary" shadow
                          header-classes="bg-white pb-5"
                          body-classes="px-lg-5 py-lg-5"
                          class="border-0 mb-3">
                        <div class="row justify-content-center">
                            <div class="col-md-12">
                                <div class="row mb-3">
                                    <strong class="col-md-4" style="text-align:right">房源名称：</strong>
                                    <a href="#"><strong class="col-md-8" style="text-align:left">时尚花园 全新家电 可短租 带独立阳台 上班方便</strong></a>
                                </div>
                                <div class="row mb-3">
                                    <strong class="col-md-4" style="text-align:right">
                                        用户名称：
                                    </strong>
                                    <a href="#"><strong class="col-md-8" style="text-align:left"></strong></a>
                                </div>
                                <div class="row mb-3">
                                    <p class="col-md-4" style="text-align:right">
                                        租赁时间：
                                    </p>
                                    <a href="#"><p class="col-md-8" style="text-align:left"></p></a>
                                </div>
                                <div class="row mb-3 justify-content-center">
                                    <badge v-if="isUpload" type="success">已上传</badge>
                                    <badge v-if="!isUpload" type="danger">未上传</badge>
                                </div>
                                <div class="row justify-content-center">
                                    <base-button v-if="!isUpload" type="primary" v-b-modal.modal-1>上传合同</base-button>
                                    <b-modal id="modal-1" title="上传合同" >
                                        <form role="form">
                                            <div class="justify-content-center">
                                                <b-form-file
                                                multiple
                                                v-model="file"
                                                :state="Boolean(file)"
                                                placeholder="请选择合同或拖动合同到此"
                                                drop-placeholder="放下"
                                                class="mb-3"
                                                ></b-form-file>
                                                <div class="row mb-3">
                                                    <base-button type="primary" class="contentDiv">保存</base-button>
                                                </div>
                                                <div class="row justify-content-center">
                                                    <small class="text-success">上传成功</small>
                                                    <i class="fa fa-check"></i>
                                                </div>
                                                <div class="row justify-content-center">
                                                    <small class="text-danger">上传失败</small>
                                                    <i class="fa fa-times"></i>
                                                </div>
                                            </div>

                                        </form>
                                        <template slot="modal-footer" slot-scope="{ok}">
                                            <!-- Emulate built in modal footer ok and cancel button actions -->
                                            <b-button size="sm" variant="success" @click="myOk">
                                                完成
                                            </b-button>
                                        </template>
                                    </b-modal>
                                    <base-button v-if="isUpload" type="default" v-b-modal.modal-2>查看合同</base-button>
                                    <b-modal id="modal-2" title="查看合同" >
                                        <div class="row justify-content-center">
                                        <b-img src="img/房间1.jpeg"></b-img>
                                        </div>
                                        <template slot="modal-footer" slot-scope="{ok}">
                                            <!-- Emulate built in modal footer ok and cancel button actions -->
                                            <b-button size="sm" variant="success" @click="ok()">
                                                完成
                                            </b-button>
                                        </template>
                                    </b-modal>
                                    <base-button v-if="isUpload" type="default" v-b-modal.modal-3>修改合同</base-button>
                                    <b-modal id="modal-3" title="修改合同" >
                                        <form role="form">
                                            <div class="justify-content-center">
                                                <b-form-file
                                                multiple
                                                v-model="file"
                                                :state="Boolean(file)"
                                                placeholder="请选择合同或拖动合同到此"
                                                drop-placeholder="放下"
                                                class="mb-3"
                                                ></b-form-file>
                                                <div class="row mb-3">
                                                    <base-button type="primary" class="contentDiv">保存</base-button>
                                                </div>
                                                <div class="row justify-content-center">
                                                    <small class="text-success">上传成功</small>
                                                    <i class="fa fa-check"></i>
                                                </div>
                                                <div class="row justify-content-center">
                                                    <small class="text-danger">上传失败</small>
                                                    <i class="fa fa-times"></i>
                                                </div>
                                            </div>

                                        </form>
                                        <template slot="modal-footer" slot-scope="{ok}">
                                            <!-- Emulate built in modal footer ok and cancel button actions -->
                                            <b-button size="sm" variant="success" @click="myOk">
                                                完成
                                            </b-button>
                                        </template>
                                    </b-modal>
                                </div>
                            </div>
                        </div>
                    </card>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
import {checkCookie} from "../api";

export default {
    data() {
        return{
            role: 'user',
            isUpload:false,
            file: null,
            showError: false,
            showInfo: false,
            errorMsg: '',
            infoMsg: ''
        }
    },
    methods: {
        myOk(){
            this.$router.go(0);
        },
        goPage(page){
            if (page === -1){
                this.$router.go(-1);
            } else {
                this.$router.push({name: page});
            }
        },
        message(msg){
            this.showError = true;
            this.errorMsg = msg;
        }
    },
    created() {
        checkCookie().then(res=>{
            if (res.code === "1"){
                this.role = res.data;
                if (this.role !== 'admin'){
                    this.showInfo = true;
                    this.infoMsg = "请登录客服账户";
                    setTimeout(() => {this.goPage(-1)}, 3000);
                }
            } else {
                this.message(res.data);
            }
        }).catch(err=>{
            this.message(err);
        })
    }
};
</script>
<style>
.contentDiv{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: auto;
}
</style>
